import { View } from "@tarojs/components";
import { useState } from "react";
import "./Tabs.less";

const tabs = [
  { label: "待办", value: 0 },
  { label: "已办", value: 1 },
  { label: "抄送", value: 2 },
  { label: "发起", value: 3 },
];

type TabsProps = {
  initialActive?: number;
};

type TabsEvents = {
  onChange?: (status: number) => void;
};
export default ({ initialActive = 1, onChange }: TabsProps & TabsEvents) => {
  const [active, setActive] = useState(initialActive);

  const handleChange = (val) => {
    onChange(val);
    setActive(val);
  };

  return (
    <View className="flex justify-around">
      {tabs.map((item) => (
        <View
          className={`relative py-2 tab flex-none whitespace-pre ${
            active == item.value ? "tab-active font-bold" : "text-second"
          }`}
          key={item.value}
          onClick={() => handleChange(item.value)}
        >
          <text>{item.label}</text>
        </View>
      ))}
    </View>
  );
};
